<template>
    <div>
        <div class="test" v-on:click="change()">下拉框
          <div v-bind:class="{current:show}">
            <div class="current-top">1111111111111111</div>
            <div class="current-bottom">
              <span id="btn" v-bind:class="{current:show}">x</span>
            222222222
              <a href="https://www.php.cn/js-tutorial-395043.html"></a><button>111</button></a>
              </div>
          </div>
        </div>
        
    </div>
</template>
<style scoped>
.test{
  width: 200px;
  height: 40px;
  background: yellow;
}
.current{
  position: fixed;
  z-index: 500;
  top: 0px;
  left: 0px;
  display: none;
}
.current-top{ 
  width: 500px; 
  height: 50%;
  background:rgba(77, 75, 75, 0.8); 
  position: fixed;
  top: 0px;
  left: 0px;
}
.current-bottom{
  width: 500px;
  height: 50%;
  background: pink;
  position: fixed;
  left: 0px;
  bottom: 0px;
}
#btn{
  position: fixed;
  right: 0px;
  font-size: 20px;
  color: white;
  top: 45%;
  right: 10px;
  width: 20px;
  height: 40px;
}
</style>
<script>
export default{
  data(){
    return{
      show:true,
      // see:true
    }
    
  },
  methods:{
    change(){
      this.show=!this.show
     
    }
  }
}
</script>